<template>
    <div class="flex w-full bg-gray-100 dark:bg-gray-900 min-h-screen">
        <div class="flex-1 flex flex-col items-center justify-center py-8">
            <div class="flex flex-col items-center mb-8">
                <el-avatar :size="96"
                    src="https://tse3-mm.cn.bing.net/th/id/OIP-C.xzfpkJdhfQ8AEGsz6fxe2QAAAA?rs=1&pid=ImgDetMain"
                    class="border-4 border-white dark:border-gray-700 shadow" />
            </div>
            <div class="w-full max-w-md">
                <div class="bg-white dark:bg-gray-700 rounded-xl shadow p-6 space-y-6">
                    <!-- 标题 -->
                    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2">账户信息</h2>
                    <!-- 账号 -->
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500 dark:text-gray-300">账号</span>
                        <span class="font-mono text-gray-800 dark:text-gray-100 font-semibold">123455</span>
                    </div>
                    <!-- 昵称 -->
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500 dark:text-gray-300">昵称</span>
                        <span class="text-gray-800 dark:text-gray-100 font-semibold">张三</span>
                    </div>
                    <!-- 密码 -->
                    <div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-500 dark:text-gray-300">密码</span>
                            <template v-if="!showPwdInput">
                                <span class="font-mono text-gray-400 tracking-widest">••••••</span>
                                <button @click="showPwdInput = true" type="button"
                                    class="ml-3 px-3 py-1 text-xs rounded bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition">更改</button>
                            </template>
                            <template v-else>
                                <input v-model="newPwd" type="password"
                                    class="rounded px-2 py-1 text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none w-32"
                                    placeholder="新密码" />
                                <button @click="submitPwd" type="button"
                                    class="ml-2 px-3 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600 transition">保存</button>
                                <button @click="cancelPwd" type="button"
                                    class="ml-1 px-3 py-1 text-xs rounded bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-500 transition">取消</button>
                            </template>
                        </div>
                    </div>
                    <!-- 文章密码 -->
                    <div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-500 dark:text-gray-300">默认文章密码</span>
                            <template v-if="!showArticlePwdInput">
                                <span class="font-mono text-gray-400 tracking-widest">••••••</span>
                                <button @click="showArticlePwdInput = true" type="button"
                                    class="ml-3 px-3 py-1 text-xs rounded bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition">更改</button>
                            </template>
                            <template v-else>
                                <input v-model="newArticlePwd" type="password"
                                    class="rounded px-2 py-1 text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none w-32"
                                    placeholder="新文章密码" />
                                <button @click="submitArticlePwd" type="button"
                                    class="ml-2 px-3 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600 transition">保存</button>
                                <button @click="cancelArticlePwd" type="button"
                                    class="ml-1 px-3 py-1 text-xs rounded bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-500 transition">取消</button>
                            </template>
                        </div>
                        <p class="text-xs text-gray-400 dark:text-gray-400 mt-1">此密码默认用于加密文章</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const showPwdInput = ref(false)
const newPwd = ref('')

const showArticlePwdInput = ref(false)
const newArticlePwd = ref('')

function submitPwd() {
    if (!newPwd.value) {
        ElMessage.warning('请输入新密码')
        return
    }
    // 这里可以调用接口修改密码
    ElMessage.success('密码修改成功')
    showPwdInput.value = false
    newPwd.value = ''
}

function cancelPwd() {
    showPwdInput.value = false
    newPwd.value = ''
}

function submitArticlePwd() {
    if (!newArticlePwd.value) {
        ElMessage.warning('请输入新文章密码')
        return
    }
    // 这里可以调用接口修改文章密码
    ElMessage.success('文章密码修改成功')
    showArticlePwdInput.value = false
    newArticlePwd.value = ''
}

function cancelArticlePwd() {
    showArticlePwdInput.value = false
    newArticlePwd.value = ''
}
</script>

<style scoped>
/* 保持简洁，主要依赖 tailwind/element-plus 的样式 */
</style>